<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-栅栏组件属性介绍</title>
    <!--Vue必须放上面-->
    <script src="../js/vue.js"></script>
    <!--ElementUi-->
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
           <el-row>
               <el-col :span="4" style="background-color: #dd6161;height: 40px"></el-col>
               <el-col :span="4" style="background-color: #5daf34;height: 40px"></el-col>
           </el-row>
           <p></p>
            <!--
                :offset="4"  让列向右移动4个单元格,后面的列跟着一起移动
            -->
            <el-row>
                <el-col :offset="4" :span="4" style="background-color: #dd6161;height: 40px"></el-col>
                <el-col :span="4" style="background-color: #5daf34;height: 40px"></el-col>
            </el-row>
            <p></p>
            <!--
                :push="2" 让当前这一列向右移动2个单元格,后面的列不懂
            -->
            <el-row>
                <el-col :push="2" :span="4" style="background-color: #dd6161;height: 40px"></el-col>
                <el-col :span="4" style="background-color: #5daf34;height: 40px"></el-col>
            </el-row>
            <p></p>
            <!--
                :pull="2" 让当前列向左边移动2个单元格,左边的列不动
            -->
            <el-row>
                <el-col :span="4" style="background-color: #dd6161;height: 40px"></el-col>
                <el-col :pull="2" :span="4" style="background-color: #5daf34;height: 40px"></el-col>
            </el-row>
            <p></p>
            <!--
                el-row的行属性：
                      type=flex 流式布局
                      justify= "" 对齐方式，默认左对齐
                          left :左对齐
                          center： 居中对齐
                          space-between : 左右两边对齐
                          space-around : 均匀分布

            -->
            <el-row type="flex" justify="space-between">
                <el-col :span="4" style="background-color: #dd6161;height: 40px"></el-col>
                <el-col :span="4" style="background-color: #5daf34;height: 40px"></el-col>
            </el-row>

    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        });
    </script>
</body>
</html>